<template>
  <div class="look">
    <!-- 查看组件 -->
    <div>
      <el-dialog title="查看详情" :visible.sync="DialogVisible" :show-close="false" width="825px" :before-close="handleClose" :destroy-on-close="true">
        <div class="lookAll">
          <div class="list" v-for="(item, index) in attributeOrder" :key="index" v-if="item.examineSign">
            <span class="fon">{{ item.CN }}:</span>
            <span class="inb" v-if="item.type === 'select' || item.type === 'switch'">{{
                optionDatass(
                  item.typeGroupCode
                    ? optionsZi[item.EN]
                    : searchOptionTable[item.EN],
                  modData[item.EN],
                  item.EN,
                  item
                )
            }}
            </span>

            <span class="inb" v-else>{{ modData[item.EN] }}</span>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirm" size="mini">确定</el-button>
        </span>
        <div class="avatar_div">
          <img v-for="(item , i ) in imgs" :key="i" @click="handlePictureCardPreview(i)" :src="item" class="avatar">
          </div>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="imgs[index]" alt="" />
          </el-dialog>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "examine",
  data () {
    return {
      DialogVisible: false,
      dialogVisible: false,
      imgs: [],
      index:'',
      showimg: false,
      imgList: [
        {
          name: "",
          url: ""
        }
      ],
      dizhi: "https://test.fenglankeji.cn"
    };
  },
  props: [
    "DialogVisibleMod",
    "modData",
    "attributeOrder",
    "optionsZi",
    "searchOptionTable",
    "getFindByTypeData",
  ],
  created () {
    // this.DialogVisible=JSON.parse(JSON.stringify(this.DialogVisibleMod))
  },
  watch: {
    modData: {
      handler (val) {

      }
    }
  },
  mounted () {
    // console.log(this.modData, "modedata")
    // this.imgList[0].url = this.imgList[0].name = this.modData.imagesPath
    // this.attributeOrder.forEach(item => {
    //   if (item.EN === "imagesPath") {
    //     console.log(item)
    //     let obj = {
    //       name: "图片",
    //       url: this.modData.imagesPath
    //     }
    //     this.imgs.push(obj);
    //     this.showimg = true;
    //   }
    // });
  },
   watch: {
    DialogVisibleMod: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(newVal);
        this.DialogVisible = JSON.parse(JSON.stringify(newVal));
        if(this.modData.imagesPath){
         let arrimg = this.modData.imagesPath.split(',')
        let sss = arrimg.map(i => {
          return this.dizhi + i
        })
        this.imgs = sss
      }
        console.log(this.imgs,'ssssssssssssss');
      },
    },
    // DialogVisibleMod(newVal,oldVal){
    //    console.log('查看组件',newVal)
    //    this.DialogVisible=JSON.parse(JSON.stringify(newVal))
    // }
  },
  methods: {
    handlePictureCardPreview (i) {
      this.index=i
      this.dialogVisible = true;
    },
    handleClose (done) {
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     this.DialogVisible=!this.DialogVisible
      //     done();
      //   })
      //   .catch(_ => {});
    },
    confirm () {
      this.DialogVisible = false;
      this.$emit("examineDialog", this.DialogVisible);
    },
  },
  computed: {
    // 字典计算属性
    optionDatass () {
      return function (arr, val, EN, data) {
        // console.log(arr,val,EN,'99999');

        // console.log(arr[val],'why');
        // 判断特殊
        if (EN == "sysCompanyCode") {
          const getFindByTypeData = this.getFindByTypeData;
          console.log(getFindByTypeData, 9999999999);

          for (let i = 0; i < getFindByTypeData.length; i++) {
            const element = getFindByTypeData[i];
            if (getFindByTypeData[i].sysCompanyCode == val) {
              return getFindByTypeData[i].name;
            }
          }
        }
        if (arr) {
          if (
            EN == "meterreader" &&
            data.isMeterreaderMultiple &&
            val.includes(",")
          ) {
            val = val.split(",");
            let names = "";
            console.log("val：：", val);
            for (let j = 0; j < val.length; j++) {
              for (let i = 0; i < arr.length; i++) {
                if (val[j] == arr[i].value) {
                  names += arr[i].label + ",";
                }
              }
            }
            return names.substring(0, names.length - 1);
          } else {
            for (let i = 0; i < arr.length; i++) {
              if (arr[i].value == val) {
                return arr[i].label;
              }
            }
          }
        }
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.look {
  .lookAll {
    display: flex;
    flex-wrap: wrap;
    // max-height: 500px;
    // overflow: hidden;
    .list {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      width: 47%;

      .fon {
        width: 29.55%;
        text-align: right;
        margin-right: 20px;
      }

      .inb {
        width: 83.45%;
        white-space: nowrap;
      }
    }
  }
}

.avatar_div{
  display: flex;
 flex-wrap: wrap;
.avatar {
  width: 178px;
  height: 178px;
  margin-right: 10px;
  border: 1px solid #000;
}
}

</style>
